<template>
    <section style="width: 100%;height: 100%;">
        <div :id="id" ref="map" v-show="!nodata" :style="styles"></div>
        <div v-show="nodata"  class="no-data" :style="styles">
            <img src="@/assets/img/nodata/map_nodata.png" alt="">
        </div>
    </section>
</template>
<script>
import axios from 'axios';
import echarts from 'echarts';
import mainCity from './../../../public/china-main-city/china-main-city-map.js';
import RenderMap from './renderMap'
export default {
  props: {
    id: {
        type: String,
        default: "map"
    },
    name: {
        type: String,
        default: "中国"
    },
    styles: {
        type: Object,
        default () {
            return {}
        }
    },
    data: {
        type: Array,
        default () {
            return []
        }
    },
  },
  data() {
    return {
      nodata: false,
    }
  },
  computed: {
    myChart() {
      return echarts.init(document.getElementById(this.id));
    }
  },
  methods: {
    async render(name) {
      try {
        await  this.getJson(name);
        if (this.myChart) {
          this.myChart.clear();
          this.myChart.setOption(new RenderMap({
            map: name,
            data: this.data
          }));
          // 添加缩放和滚动事件
          // this.myChart.on('georoam', (params) => {
          //   let option = this.myChart.getOption();
          //   if (params.zoom != null && params.zoom != undefined) { //捕捉到缩放时
          //       option.geo[0].zoom = option.series[0].zoom; //下层geo的缩放等级跟着上层的geo一起改变
          //       option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          //   } else { //捕捉到拖曳时
          //       option.geo[0].center = option.series[0].center; //下层的geo的中心位置随着上层geo一起改变
          //   }
          //   this.myChart.dispatchAction({
          //     type: 'restore'
          //   })
          //   this.myChart.setOption(option);
          // })
          window.addEventListener("resize", this.resize);
        }
      } catch (err) {
        console.log(err)
      }
    },
    async getJson (name) {
      /**
      * 更多json数据可以在项目里public/china-main-city这个文件夹里获得
      * 也可以访问http://datav.aliyun.com/tools/atlas/#&lat=30.332329214580188&lng=106.72278672066881&zoom=3.5下载想要的json数据
      */
      try {
        const res = await axios.get(`./china-main-city/${mainCity[name]}.json`);
        echarts.registerMap(`${name}`, res.data);
      } catch (err) {
        console.log(err)
      }
    },
    resize () {
      /* 把这个单独拎出来是因为如果写在window.addEventListener("resize", () => { this.myChart.resize()})里面
      当你需要移除这个监听事件的时候，这样写window.removeEventListener("resize")是不起作用的，而应该这样写
      window.addEventListener("resize", this.resieze)和window.removeEventListener('resize', this.resize)才可以正确移除*/
      this.myChart.resize();
    }
  },
  mounted () {
    if (this.data.length) {
      this.$nextTick(() => {
        this.render(this.name);
      })
    } else {
      this.nodata = true;
    }
  },
  beforeDestroy () {
    window.removeEventListener('resize', this.resize);
    if (this.myChart) {
      this.myChart.dispose();
    }
  },
}
</script>
